<template>
  <div :class="{'isPC' : !isPhone}" class="fullScreen_content_android">
    <!-- 按钮 -->
    <div v-if="isPhone" class="all_btn">
      <div class="group_btn">
        <van-button class="btn back_btn" @click.native="handleGoBack">exitSignature</van-button>
      </div>
      <div class="group_btn more_btn">
        <van-button class="btn clear_btn" @click.native="handleEmpty">clearSignature</van-button>
        <van-button class="btn use_btn" @click.native="handleSubmit">usingSignatures</van-button>
      </div>
    </div>
    <div v-if="!isPhone" class="all_btn">
      <div class="all_btn_1">
        <van-button class="btn back_btn" @click.native="handleGoBack">exitSignature</van-button>
      </div>
      <van-button class="btn clear_btn" @click.native="handleEmpty">clearSignature</van-button>
      <van-button class="btn use_btn" @click.native="handleSubmit">usingSignatures</van-button>
    </div>
    <!-- 点击进行签名 -->
    <div v-if="!sign" class="sign_board" @click="handleStart">
      <div class="no_sign">
        <span class="prompt">clickToSign</span>
      </div>
    </div>
    <div v-if="sign" class="sign_board">
      <div class="no_sign">
        <vue-esign
          ref="esign"
          :height="signHeight"
          :is-crop="isCrop"
          :line-color="lineColor"
          :line-width="lineWidth"
          :width="signWidth"
        />
      </div>
    </div>
    <toast
      v-model="showPositionValue"
      :text="promptInformation"
      :time="1000"
      class="rotating"
      is-show-mask
      position="middle"
      type="text"
    />
  </div>
</template>

<script>
import vueEsign from "vue-esign";
function rotateBase64Img(src, edg, callback) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");

  var imgW; //图片宽度
  var imgH; //图片高度
  var size; //canvas初始大小

  if (edg % 90 != 0) {
    console.error("旋转角度必须是90的倍数!");
    throw "旋转角度必须是90的倍数!";
  }
  edg < 0 && (edg = (edg % 360) + 360);
  const quadrant = (edg / 90) % 4; //旋转象限
  const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; //裁剪坐标

  var image = new Image();
  image.crossOrigin = "anonymous";
  image.src = src;

  image.onload = function() {
    imgW = image.width;
    imgH = image.height;
    size = imgW > imgH ? imgW : imgH;

    canvas.width = size * 2;
    canvas.height = size * 2;
    switch (quadrant) {
      case 0:
        cutCoor.sx = size;
        cutCoor.sy = size;
        cutCoor.ex = size + imgW;
        cutCoor.ey = size + imgH;
        break;
      case 1:
        cutCoor.sx = size - imgH;
        cutCoor.sy = size;
        cutCoor.ex = size;
        cutCoor.ey = size + imgW;
        break;
      case 2:
        cutCoor.sx = size - imgW;
        cutCoor.sy = size - imgH;
        cutCoor.ex = size;
        cutCoor.ey = size;
        break;
      case 3:
        cutCoor.sx = size;
        cutCoor.sy = size - imgW;
        cutCoor.ex = size + imgH;
        cutCoor.ey = size + imgW;
        break;
    }

    ctx.translate(size, size);
    ctx.rotate((edg * Math.PI) / 180);
    ctx.drawImage(image, 0, 0);

    var imgData = ctx.getImageData(
      cutCoor.sx,
      cutCoor.sy,
      cutCoor.ex,
      cutCoor.ey
    );
    if (quadrant % 2 == 0) {
      canvas.width = imgW;
      canvas.height = imgH;
    } else {
      canvas.width = imgH;
      canvas.height = imgW;
    }
    ctx.putImageData(imgData, 0, 0);
    callback(canvas.toDataURL());
  };
}

export default {
  name: "demo",
  name: "FullScreen",
  components: {
    vueEsign
  },
  data() {
    return {
      signWidth: 500,
      lineWidth: 6,
      lineColor: "#000000",
      resultImg: "",
      rotate: 0,
      isCrop: true,
      signHeight: 0,
      sign: false,
      isPhone: true,
      showPositionValue: false, // 是否弹窗
      promptInformation: "" // 弹窗提示信息
    };
  },
  mounted() {
    this.setView();
    window.onresize = () => {
      this.setView();
    };
  },
  methods: {
    setView() {
      this.isPhone = true;
      if (this.isPhone) {
        this.signHeight = document.body.clientHeight * 1.6;
        this.signWidth = document.body.clientWidth * 0.9;
      } else {
        this.signHeight = document.body.clientHeight * 0.9;
        this.signWidth = document.body.clientWidth;
      }
      if (this.sign) {
        this.handleEmpty();
        this.sign = false;
        setTimeout(() => {
          this.sign = true;
        }, 200);
      }
    },

    handleStart() {
      // 点击进行签名
      this.sign = true;
    },

    // 清空画布
    handleEmpty() {
      if (this.sign) {
        this.resultImg = "";
        this.$refs.esign.reset();
      }
    },

    // 退出签名
    handleGoBack() {
      this.$emit("back", this.resultImg);
    },

    handleSubmit() {
      if (!this.sign) {
        return;
      }
      this.$refs.esign
        .generate()
        .then(async res => {
          if (this.isPhone) {
            rotateBase64Img(res, -90, img => {
              this.resultImg = img;
              this.$emit("submit", this.resultImg);
            });
          } else {
            this.resultImg = res;
            this.$emit("submit", this.resultImg);
          }
        })
        .catch(() => {
          // 画布没有签字时会执行这里 'Not Signned'
          // 弹窗提示
          // this.showPositionValue = true;
          // this.promptInformation = '签名不存在，请签名';
          this.$emit("submit", "");
        });
    },
    // 获取base64图片的长宽
    getBase64Width(img) {
      const image = new Image();
      image.crossOrigin = "";
      image.src = img;
      return new Promise(resolve => {
        image.onload = function() {
          const { width, height } = image;
          resolve({ width, height });
        };
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.fullScreen_content_android {
  width: 100vw;
  height: 100vh;
  padding: 6vh 20px;
  background-color: white;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.all_btn {
  height: 100%;
  width: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  .all_btn_1 {
    flex: 1;
  }
}

.group_btn {
  // height: 40%;
  box-sizing: border-box;
  padding: 10vw 0;
}

.more_btn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.btn {
  margin: 0;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 30vw;
  height: 10vw;
  font-size: 16px;
  padding: 0;
  background-color: white;
  border: 1px solid #f7f8fa;
  color: #343434;
}

.use_btn,
.use_btn.weui-btn_default:not(.weui-btn_disabled):active {
  background: #3978ff;
  color: white;
  border: 1px solid #3978ff;
}

.clear_btn {
  margin-bottom: 30vw;
}

.sign_board {
  width: 80vw;
  background-color: #f7f8fa;
  border-radius: 16px;

  .no_sign {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .prompt {
      font-size: 36px;
      color: #c8c9cc;
      transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      /* Internet Explorer 9*/
      -moz-transform: rotate(90deg);
      /* Firefox */
      -webkit-transform: rotate(90deg);
      /* Safari 和 Chrome */
      -o-transform: rotate(90deg);
    }
  }
}

.rotating {
  position: absolute;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* Internet Explorer 9*/
  -moz-transform: rotate(90deg);
  /* Firefox */
  -webkit-transform: rotate(90deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  top: 50%;
  left: 50%;
}

@media screen and (max-width: 1000px) {
}
.isPC {
  flex-direction: column-reverse;
  overflow: hidden;

  .all_btn {
    height: 10vh;
    display: flex;
    flex-direction: row;
    width: 96%;
    position: relative;
    margin-top: 30px;

    .clear_btn {
      margin-right: 10px;
    }

    .btn {
      width: 10vw;
      height: 6vh;
      margin-bottom: 0;
      min-width: 120px;
      transform: rotate(0);
    }
  }

  .sign_board {
    flex: 1;
    width: 90vw;
  }

  .prompt {
    transform: rotate(0) !important;
  }

  .rotating {
    transform: rotate(0) !important;
  }
}
</style>
